<template>
  <div style="position:relative;top:31.88px;">
      <div class="goods-box" v-for="item of cartsList" :key="item.id" >
        <div style="display:none" ref="ID">{{item.id}}</div>
        <input type="checkbox"  class="mui-btn checkBox" >   
        <div class="left-img"  @click="$router.push('../../BoBo/GoodsDetail/'+item.id)">
          <img class="goods-img" :src="require('../../../../img/home/'+item.recoImg)" >
        </div>
        <div class="right-word">
          <div class="goods-desc" @click="$router.push('../../BoBo/GoodsDetail/'+item.id)">
            <span>{{item.recoDesc}}</span></div>
          <div class="goods-price">
            <span class="money">￥{{item.recoPrice}}</span>
          </div>
          <button type="button" class="del mui-btn mui-btn-danger" 
          @click="removeFromLocalStorage(item.id)">删除</button>
          <button type="button" class="buy mui-btn mui-btn-success mui-btn-outlined" 
          @click="BuyFormCarts(item.id)">购买</button>
        </div>
      </div>
      
      <div>
          <p style="font-size: 10px; text-align: center;margin:10px;margin-bottom:128px">
            到达页面的尽头</p>
      </div>
  </div>

</template>

<script>
import mui from "../../../mui/js/mui.js"
export default {
    name: 'CartsList',
    props:{
        cartsList:Array
    },
    methods: {
    removeFromLocalStorage(id){
      const value = localStorage.getItem(id); 
      if (value) {
        localStorage.removeItem(id);
        mui.toast('删除成功', { type: 'success' })
        this.$router.go(0)
      } else {
        mui.toast('删除有误!', { type: 'success' })
      }
    },
    BuyFormCarts(id){
      const value = localStorage.getItem(id); 
      if (value) {   
        mui.confirm('确认要购买吗？', '提示', ['确定', '取消'], function(e) {
          if (e.index == 0) {
            localStorage.removeItem(id);
            location.reload();  
          }
        }, 'div');
      } else {
        mui.toast('购买有误!', { type: 'success' })
      }
    },
  },  

}

</script>
<style scoped lang="stylus">
.goods-box{
    height 8rem
    padding 2% 
    overflow hidden
    background-color white
  }
  .left-img{
    width 33%
    min-height 99%
    display inline-block
    float left
    margin-left 7%
    position relative //实现图片始终紧贴四壁
  }
  .goods-img{
    width 100%
    height 100%
    position absolute //实现图片始终紧贴四壁
    top 0
    left 0
    object-fit cover
    border-radius 10px
  }
  .right-word{
    position relative 
    float right
    width 58%
    min-height 100%;
    /*margin-right 3rem*/
  }
  .goods-desc{
    margin .3rem
    width max-width
    height auto
    font-size 1rem
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2
    overflow hidden
    text-overflow ellipsis
  }
  .money{
    float left
    margin .3rem
    color #f5812c
    font-weight bold
    font-size 1.4rem
  }

  .goods-price{
    position absolute
    bottom 0
    left 0
  }
  .mui-btn{
    position absolute
    height 1.8em
    margin .3em
    padding .1em .4em
  }
  .buy{
    bottom 0em
    right 0
  }
  .del{
    bottom 2.3em
    right 0
  }
  .checkBox{
    height auto
  }
</style>